<template>
  <div class="moviesDetailContainer">
    <img class="movieImg" :src="moviesInfo.images.large" alt="">
    <p class="movie_name">{{moviesInfo.original_title}}</p>
    <div class="detail_content">
      <span>评分：{{moviesInfo.rating.average}}</span>
      <span>导演：{{moviesInfo.directors[0].name}}</span>
      <span class="directors">主演：
        <span v-for="(item,index) in moviesInfo.casts" :key="index">{{item.name}}</span>
        </span>
    </div> 
    <button>我要观影</button>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  data(){
    return {
      moviesInfo:{}
    }
  },
  beforeMount() {
    // console.log(this.MoviesArr)
    console.log(this.$mp.query.index)
    this.moviesInfo = this.MoviesArr[this.$mp.query.index]
    console.log(this.moviesInfo)
  },
  computed: {
    ...mapState(['MoviesArr'])
  },
}
</script>
<style scoped>
.moviesDetailContainer{
  display: flex;
  flex-direction:column;
}
.movieImg {
  display: block;
  width:70%;
  height:700rpx;
  margin: 60rpx auto;
}
.movie_name{
  font-size: 40rpx;
  font-weight: 700;
  text-align: center;
}
.detail_content {
  display: flex;
  flex-direction:column;
  margin-left:20%;
  line-height: 50rpx;
  font-size: 26rpx;
  margin-top:30rpx;
}

button{
  width: 70%;
  height: 80rpx;
  line-height: 80rpx;
  background: green;
  color:#fff;
  font-size: 28rpx;
  margin-top:20rpx;
}
</style>
